<template>
	<view class="cate-select">
		<view class="flex">
			<view class="flex-1 ul1">
				<view
					v-for="(item, index) in list"
					:key="`one-${item.id}`"
					@click="setIndex(0, index)"
					class="item"
					:class="{
						select: selectIndex == index,
					}"
					>{{ item.name }}</view
				>
			</view>
			<view class="flex-1 ul2" v-if="list[selectIndex].child.length">
				<view
					v-for="(item, index) in list[selectIndex].child"
					:key="`two-${item.id}`"
					@click="setIndex(1, index)"
					class="item"
					:class="{
						select: selectIndex1 == index,
					}"
					>{{ item.name }}</view
				>
			</view>
			<view class="flex-1 ul3" v-if="list[selectIndex].child.length && list[selectIndex].child[selectIndex1].child.length">
				<view
					v-for="(item, index) in list[selectIndex].child[selectIndex1].child"
					:key="`three-${item.id}`"
					@click="setIndex(2, index)"
					class="item"
					:class="{
						select: selectIndex2 == index,
					}"
					>{{ item.name }}</view
				>
			</view>
		</view>
		<view class="confirm-button" @click="confirm"> 确定 </view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [],
			selectIndex: 0,
			selectIndex1: 0,
			selectIndex2: 0,
		}
	},
	created() {
		this.getList()
	},
	methods: {
		confirm(){
			// 获取每一级的id
			let id1 = this.list[this.selectIndex].id || ''
			let id2 = ''
			let id3 = ''
			if( this.list[this.selectIndex].child.length){
				id2 = this.list[this.selectIndex].child[this.selectIndex1].id || ''
			}
			if(this.list[this.selectIndex].child.length && this.list[this.selectIndex].child[this.selectIndex1].child.length){
				id3 = this.list[this.selectIndex].child[this.selectIndex1].child[this.selectIndex2].id || ''
			}
			// 如果有child就要继续选择
			if(!id1){
				uni.showToast({
					title:'请选择分类',
					icon:'none'
				})
				return
			}
			if(this.list[this.selectIndex].child.length && !id2){
				uni.showToast({
					title:'请选择最后一级分类',
					icon:'none'
				})
			}
			if(this.list[this.selectIndex].child.length && this.list[this.selectIndex].child[this.selectIndex1].child.length && !id3){
				uni.showToast({
					title:'请选择最后一级分类',
					icon:'none'
				})
			}


				
			this.$emit('select',[id1,id2,id3].filter(item=>item!=''))
		},
		async getList() {
			let { data } = await this.$http({
				url: "/api/Course/course_cate",
			})
			console.log(data)
			this.list = data
		},
		setIndex(type, index) {
			switch (type) {
				case 0:
					this.selectIndex = index
					this.selectIndex1 = 0
					this.selectIndex2 = 0
					break
				case 1:
					this.selectIndex1 = index
					this.selectIndex2 = 0
					break
				case 2:
					this.selectIndex2 = index
					break
			}
		},
	},
}
</script>
<style lang="scss">
.cate-select {
	height: 100%;
	display: grid;
	grid-template-rows: 1fr 90rpx;
	.flex {
		display: flex;
	}
	.flex-1 {
		width: 33%;
		text-align: center;
	}
	.item {
		height: 80rpx;
		line-height: 80rpx;
	}
	.select {
		color: #ff8a9b;
		background: white;
	}
	.ul1 {
		background-color: #efeeee;
		.select {
			color: #ff8a9b;
			background: #f5f5f5;
		}
	}
	.ul2 {
		background-color: #f5f5f5;
		.select {
			color: #ff8a9b;
			background: #fffefe;
		}
	}
	.ul3 {
		background-color: white;
		.select {
			color: #ff8a9b;
			background: white;
		}
	}
	.confirm-button {
		background-color: #ff8a9b;
		color: white;
		bottom: 0;
		width: 90vw;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 100rpx;
		text-align: center;
		left: 50%;
		margin: 0 auto;
	}
}
</style>
